<template>
	<div class="content">
		<van-row>
		  <van-col span="8">
			  <van-image
			    round
			    width="4rem"
			    height="4rem"
			    :src="userinfo.avator"
			  />
		  </van-col>
		  <van-col span="16">
			  <div class="member-detail">
			  	<p class="nickname">{{userinfo.username}}</p>
			  	<p class="info">{{userinfo.intro}}</p>
			  </div>
		  </van-col>
		</van-row>
		<van-cell-group title="我的订单">
			<van-grid clickable >
			  <van-grid-item icon="photo-o" text="全部"/>
			  
			  <van-grid-item v-if="badge_numbers.wait_pay==0" icon="photo-o" text="待付款" to="/test"/>
			  <van-grid-item v-else icon="photo-o" text="待付款" :badge="badge_numbers.wait_pay" to="/test"/>
			  
			  <van-grid-item icon="photo-o" text="待发货" :badge="badge_numbers.wait_send" to="/test"/>
			  <van-grid-item icon="photo-o" text="待收货" :badge="badge_numbers.wait_receive"  to="/test"/>
			</van-grid>
		</van-cell-group>
		<van-cell-group title="基本资料">
		  <van-cell title="个人资料" is-link to="/uc/profile"></van-cell>
		  <van-cell title="收货地址" is-link to="/uc/address"></van-cell>
		  <van-cell title="关于" is-link to="/demo"></van-cell>
		</van-cell-group>
	</div>
</template>

<script lang="ts" setup>
	import {reactive} from 'vue';
	
	const badge_numbers = reactive({
		"wait_pay": 2,
		"wait_send": 4,
		"wait_receive":5
	})
	const userinfo = reactive({
		"username":"昵称",
		"intro": "这里是用户的介绍信息",
		"avator": "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
	})
	
</script>

<style>
	.content {
		background-color: #f7f8fa;
		height: 500px;
		padding: 15px 10px;
	}
	.member-detail{
		font-size: 14px;
	}
</style>